import React from "react";
import { useTranslation } from "react-i18next";
import HeaderComponent from "@/components/HeaderComponent/HeaderComponent";
import { InfiniteScroll, Tabs } from "antd-mobile";
import "./AccountDetail.less";
import { useState } from "react";

import { get_UserTransactionOrder } from "@/api/module/U2U";
import { getAccountRecord } from "@/api/module/user";
import InfiniteScrollContent from "@/components/InfiniteScrollContentComponent/InfiniteScrollContentComponent";

const DetailComponent = () => {
  const { t } = useTranslation();
  const tabList = ["USDT", "XJB", "ZCB", "JHB", "FTB", "STF", "RWA", "RWB"];
  const [active, setActive] = useState<string>("USDT");
  // 定义映射表
  const currencyMap = {
    USDT: "USDT",
    XJB: "XJB",
    ZCB: "ZCB",
    JHB: "JHB",
    FTB: "FTB",
    STF: "STF",
    RWA: "GPB", // RWA 映射为 GPB
    RWB: "GBJ", // RWB 映射为 GBJ
  };

  const [data, setData] = useState<
    Awaited<ReturnType<typeof getAccountRecord>>["data"]["list_data"]
  >([]);
  const [page, setPage] = useState(1);
  const [hasMore, setHasMore] = useState(true);

  async function loadMore() {
    // if (active == "USDT" || active == "XJB") {
    //   const res = await get_UserTransactionOrder(
    //     page + "",
    //     active == "USDT" ? 1 : 2
    //   );
    //   setPage(page + 1);
    //   setData((val) => [...val, ...res.data.list_data]);
    //   setHasMore(res.data.total_page > +res.data.page_on);
    // } else {
    // 根据 active 获取对应的 currency 参数
    const currency = currencyMap[active];
    const res = await getAccountRecord({
      page: page + "",
      currency: currency,
    });
    setPage(page + 1);
    // res.data.list_data.push(
    //   ...[
    //     {
    //       description: '备注',
    //       amount: '数量',
    //       add_time: '时间',
    //     },
    //   ]
    // );
    // const append2 = await Promise.resolve(append);
    setData((val) => [...val, ...res.data.list_data]);
    setHasMore(res.data.total_page > +res.data.page_on);
    // }
  }

  return (
    <div>
      <div>
        <Tabs
          onChange={(val) => {
            setPage(1);
            setData([]);
            setActive(val);
            setHasMore(true);
          }}
          style={{
            "--active-title-color": "#e99434",
            "--active-line-color": "#e99434",
          }}
          activeKey={active}
        >
          {tabList.map((item) => {
            return (
              <Tabs.Tab title={item} key={item}>
                {/* <div className="text-white-1">content of {item}</div> */}
              </Tabs.Tab>
            );
          })}
        </Tabs>
      </div>
      <div
        className="list mt-4 overflow-y-scroll"
        style={{
          maxHeight: "calc(100vh - 7rem)",
        }}
      >
        {data.map((item, index) => {
          return (
            <div key={index} className="bg-bg-1 p-4 rounded-lg mb-4">
              <div className="flex justify-between items-center">
                <div>{t("note")}</div>
                <div>
                  {/* {active == "XJB"
                    ? item.state == "1"
                      ? t("forSale")
                      : t("completed")
                    : item.description} */}
                  {"" + item?.description}
                </div>
              </div>
              <div className="flex justify-between items-center">
                <div>{t("amount")}</div>
                <div className="text-font-9">
                  {/* {active == "USDT" || active == "XJB" ? item.num : item.amount} */}
                  {item.amount}
                </div>
              </div>
              <div className="flex justify-between items-center">
                <div>{t("time")}</div>
                <div>
                  {/* {active == "USDT" || active == "XJB"
                    ? item.from_creat_time
                    : item.add_time} */}
                  {item.add_time}
                </div>
              </div>
            </div>
          );
        })}
        <InfiniteScroll loadMore={loadMore} hasMore={hasMore}>
          <InfiniteScrollContent hasMore={hasMore} />
        </InfiniteScroll>
      </div>
    </div>
  );
};

export default function AccountDetail() {
  return (
    <div className="text-white-1 px-4">
      <HeaderComponent title="accountDetail" />
      <DetailComponent />
    </div>
  );
}
